<template>
  <div class="system-view">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>系统状态</span>
          <el-button @click="$router.back()" type="primary" :icon="ArrowLeft">
            返回聊天
          </el-button>
        </div>
      </template>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="hover">
            <template #header>系统健康状态</template>
            <div v-if="systemHealth">
              <el-descriptions :column="1" border>
                <el-descriptions-item label="整体状态">
                  <el-tag :type="systemHealth.status === 'UP' ? 'success' : 'danger'">
                    {{ systemHealth.status === 'UP' ? '正常' : '异常' }}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="数据库">
                  <el-tag :type="systemHealth.components.database.status === 'UP' ? 'success' : 'danger'">
                    {{ systemHealth.components.database.status === 'UP' ? '连接正常' : '连接异常' }}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="AI服务">
                  <el-tag :type="systemHealth.components.ai_service.status === 'UP' ? 'success' : 'danger'">
                    {{ systemHealth.components.ai_service.status === 'UP' ? '连接正常' : '连接异常' }}
                  </el-tag>
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="12">
          <el-card shadow="hover">
            <template #header>系统信息</template>
            <div v-if="systemInfo">
              <el-descriptions :column="1" border>
                <el-descriptions-item label="应用名称">
                  {{ systemInfo.application }}
                </el-descriptions-item>
                <el-descriptions-item label="版本">
                  {{ systemInfo.version }}
                </el-descriptions-item>
                <el-descriptions-item label="Java版本">
                  {{ systemInfo.java_version }}
                </el-descriptions-item>
                <el-descriptions-item label="内存使用">
                  {{ formatMemory(systemInfo.memory.used) }} / {{ formatMemory(systemInfo.memory.max) }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ArrowLeft } from '@element-plus/icons-vue'
import { systemApi } from '@/api'
import type { SystemHealth, SystemInfo } from '@/types'

const systemHealth = ref<SystemHealth>()
const systemInfo = ref<SystemInfo>()

onMounted(async () => {
  try {
    const [health, info] = await Promise.all([
      systemApi.getSystemHealth(),
      systemApi.getSystemInfo()
    ])
    systemHealth.value = health
    systemInfo.value = info
  } catch (error) {
    console.error('加载系统信息失败:', error)
  }
})

function formatMemory(bytes: number): string {
  const mb = bytes / (1024 * 1024)
  return `${mb.toFixed(1)} MB`
}
</script>

<style scoped>
.system-view {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>